<template>

	<view id="container"></view>

</template>

<script setup lang="ts">
	import {
		shallowRef
	} from '@vue/reactivity'
	import {
		onMounted
	} from 'vue'
	// @ts-ignore
	import AMapLoader from '@amap/amap-jsapi-loader';
	const map = shallowRef(null);
	// 设置一个图标对象
	var icon = {
		// 图标类型，现阶段只支持 image 类型
		type: 'image',
		// 图片 url
		image: '/static/logo.png',
		// 图片尺寸
		size: [30, 30],
		// 图片相对 position 的锚点，默认为 bottom-center
		anchor: 'center',
	};
	var textStyle = {
		fontSize: 10,
		fontWeight: 'normal',
		fillColor: '#ff0000',
		strokeColor: '#fff',
		strokeWidth: 2,
		fold: true,
		padding: '2, 5',
		offset:[0, -5]
	};
	var LabelsData = [{
			name: '祥和人家西北菜铁锅焖面店',
			position: [109.85354, 39.61476],
			zooms: [10, 20],
			opacity: 1,
			zIndex: 10,
			fold: true,
			icon,
			text: {
				// 要展示的文字内容
				content: '祥和人家西北菜铁锅焖面店',
				// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
				direction: 'right',
				// 在 direction 基础上的偏移量
				offset: textStyle.offset,
				// 文字样式
				style: textStyle
			}
		},
		{
			name: '内蒙古智学教育咨询有限公司',
			position: [109.7652, 39.596413],
			zooms: [10, 20],
			opacity: 1,
			zIndex: 16,
			icon,
			text: {
				content: '内蒙古智学教育咨询有限公司',
				direction: 'right',
				offset: textStyle.offset,
				style: textStyle
			}
		},
		{
			name: '康巴什区恒峰电料销售店',
			position: [109.786026, 39.61443],
			zooms: [10, 20],
			opacity: 1,
			zIndex: 8,
			icon,
			text: {
				content: '康巴什区恒峰电料销售店',
				direction: 'right',
				offset: textStyle.offset,
				style: textStyle
			}
		},
		{
			name: '伊克昭大药房',
			position: [109.76171, 39.60343],
			zooms: [10, 20],
			opacity: 1,
			zIndex: 23,
			icon,
			text: {
				content: '伊克昭大药房',
				direction: 'right',
				offset: textStyle.offset,
				style: textStyle
			}
		}
	];

	const initMap = () => {
		AMapLoader.load({
			key: "69ef019e47c9c7700d179de9d38f2b78", // 申请好的Web端开发者Key，首次调用 load 时必填
			version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		}).then((AMap) => {
			let map = new AMap.Map("container", {
				resizeEnable: true,
				center: [109.858614, 39.608301],
				zoom: 13
			});
			let markers = [];
			let allowCollision = false;
			for (var i = 0, marker; i < LabelsData.length; i++) {
				let layer = new AMap.LabelsLayer({
					zooms: [3, 20],
					zIndex: 1000,
					// collision: false,
					// 设置 allowCollision：true，可以让标注避让用户的标注
					// allowCollision,
				});

				layer.add(markers);
				// 图层添加到地图
				map.add(layer);

				let curData = LabelsData[i];
				curData.extData = {
					index: i
				};

				let labelMarker = new AMap.LabelMarker(curData);

				markers.push(labelMarker);


				// 将 marker 添加到图层
				layer.add(markers);


				// 为 labelMarker 绑定事件
				labelMarker.on('click', function(e) {
					// let address = e.data.data.name;
					// 创建一个自定义内容的 infowindow 实例
					// var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
					var infoWindow = new AMap.InfoWindow({
						offset: new AMap.Pixel(0, -10),
						content: `<div className="custom-infowindow input-card">` +
							`<label style="color:grey">${e.data.data.name}</label>` +
							`</div>`
					});
					infoWindow.open(map, e.data.data.position);
				});
			}



		}).catch(e => {
			console.log(e);
		})
	}

	onMounted(() => {
		//DOM初始化完成进行地图初始化
		initMap();

	})
</script>

<style>
	#container {
		position: absolute;
		left: 0;
		top: 0;
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 100%;
	}
</style>
